import React, { FunctionComponent } from 'react';

import { Form, message } from 'antd';

import * as API from '@/services';
import {
  DEFAULT_FORM_FLEX_LAYOUT,
  KfBizQuickFormProps,
  KfFloatingContextProps,
  KfQuickForm,
  KfRemoteSelect,
  KfUpload,
  UPLOAD_ACCEPT,
  useBackendEnum,
} from 'kf-web-library';
import { MaterialType } from '@/components';

const FormItem = Form.Item;
type QueryEntity = API.Material;
type CreateEntity = API.Material_BatchUrlsCreate;

type DataFormProps = {
  type: MaterialType;
  defaultGroupId?: API.EntityId;
} & KfBizQuickFormProps &
  KfFloatingContextProps;

const QuickForm: FunctionComponent<DataFormProps> = (props) => {
  const { formType, bizId, defaultGroupId, type, ...rest } = props;

  const { enumDict } = useBackendEnum();
  const typeName = enumDict['MaterialType'][type].enumDesc;

  return (
    <KfQuickForm
      formType={formType}
      formProps={{
        ...DEFAULT_FORM_FLEX_LAYOUT,
        initialValues: {
          groupId: defaultGroupId,
          urls: [],
        },
      }}
      submitRequest={{
        create: (formValues) =>
          API.createMaterials({
            ...formValues,
            type,
            urls: formValues.urls.map((u) => u + '&ts=true'),
          } as CreateEntity),
      }}
      onValidateFailed={(errorInfo) => {
        console.log(errorInfo);
      }}
      {...rest}
    >
      <FormItem name={nameof<CreateEntity>((x) => x.groupId)} label="分组" rules={[{ required: true }]}>
        <KfRemoteSelect
          optionsRequest={() =>
            API.queryMaterialGroups({ types: [type], pageSize: 1000 }).then((resp) => {
              return new Promise((resolve, reject) => {
                if (resp.flag) {
                  resolve(
                    resp.data.map((entity) => {
                      return {
                        label: entity.name,
                        value: entity.id,
                      };
                    }),
                  );
                }
                reject();
              });
            })
          }
          {...props}
        />
      </FormItem>
      <FormItem
        name={nameof<CreateEntity>((x) => x.urls)}
        label={`${typeName}`}
        rules={[
          { required: true },
          /*({getFieldValue}) => ({
              validator(_, value) {
                  if (value && (value as AuditPassUploadValue[]).find(v => !v.auditPass)) {
                      return Promise.reject(new Error(type == "IMG" ? '请等待图片处理...' : '请等待视频转码完成...'));
                  }
                  return Promise.resolve();
              },
          }),*/
        ]}
        extra={
          <span
            style={{
              display: 'block',
              marginBottom: 30,
            }}
          >
            {type == 'IMG' && '1. 支持jpg、jpeg、png格式；大小不超过 10MB； 2. 一次最多上传10个文件'}
            {type == 'VIDEO' && '支持mp4、avi、mov、flv等视频文件格式，大小不超过500MB；'}
            {type == 'FILE' && '支持pdf、xls、doc、txt、ppt等常用文件格式，大小不超过500MB；'}
          </span>
        }
      >
        {type == 'IMG' && (
          <KfUpload.PictureWall
            accept={UPLOAD_ACCEPT.image}
            maxCount={10}
            beforeUpload={(_file, _filelist) => {
              const exceededSizeLimit = _file.size / 1024 / 1024 > 10;
              if (exceededSizeLimit) {
                message.error('上传失败: 文件过大，请不要大于10MB');
                return false;
              }
              return true;
            }}
          />
        )}
        {type == 'VIDEO' && (
          <KfUpload.Rapid
            waitVideoTranscoding={true}
            accept={`${UPLOAD_ACCEPT.video},.flv`}
            maxCount={10}
            beforeUpload={(_file, _filelist) => {
              const exceededSizeLimit = _file.size / 1024 / 1024 > 500;
              if (exceededSizeLimit) {
                message.error('上传失败: 文件过大，请不要大于500MB');
                return false;
              }
              return true;
            }}
          />
        )}
        {type == 'FILE' && (
          <KfUpload.Rapid
            waitVideoTranscoding={true}
            accept={`${UPLOAD_ACCEPT.pdf},${UPLOAD_ACCEPT.txt},${UPLOAD_ACCEPT.excel},${UPLOAD_ACCEPT.word},${UPLOAD_ACCEPT.ppt}`}
            maxCount={10}
            beforeUpload={(_file, _filelist) => {
              const exceededSizeLimit = _file.size / 1024 / 1024 > 500;
              if (exceededSizeLimit) {
                message.error('上传失败: 文件过大，请不要大于500MB');
                return false;
              }
              return true;
            }}
          />
        )}
      </FormItem>
    </KfQuickForm>
  );
};

export default QuickForm;
